<template>
  <div class="resident-tech-bg">
    <div class="particle-bg"></div>
    <div class="resident-content-table">
      <div class="resident-header-bar">
        <div class="resident-title">
          <i class="el-icon-user resident-icon"></i>
          <span>住户人员添加</span>
        </div>
        <el-select v-model="selectedAreaId" placeholder="切换小区" @change="handleAreaChange" class="area-select" style="width: 180px;">
          <el-option v-for="area in areaList" :key="area.id" :label="area.aname" :value="area.id" />
        </el-select>
      </div>
      <el-table :data="houseTableData" class="resident-table" stripe>
        <el-table-column type="index" :index="(index) => index + 1" label="编号" width="80" />
        <el-table-column prop="hnum" label="房屋编号" />
        <el-table-column prop="htype" label="房屋类型" />
        <el-table-column prop="hsize" label="面积(㎡)">
          <template #default="scope">{{ scope.row.hsize }}㎡</template>
        </el-table-column>
        <el-table-column prop="bname" label="所属楼栋" />
        <el-table-column prop="hstate" label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.hstate === 1 ? 'success' : 'warning'">
              {{ scope.row.hstate === 1 ? '已入住' : '空置' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="small" @click="openResidentDialog(scope.row)">查看住户</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 16px"
        background
        layout="prev, pager, next, jumper, ->, total"
        :total="houseTotal"
        :page-size="housePageSize"
        :current-page="houseCurrentPage"
        @current-change="handleHousePageChange"
      />
      <!-- 住户弹窗 -->
      <el-dialog :title="`房屋 ${selectedHouse?.hnum || ''} - 住户信息`" v-model="residentDialogVisible" class="resident-dialog" width="60%">
        <div>
          <el-button type="primary" @click="openAddResidentDialog" class="add-btn">新增住户</el-button>
          <el-table :data="residentTableData" class="resident-table" stripe>
            <el-table-column type="index" :index="(index) => index + 1" label="编号" width="60" />
            <el-table-column prop="ibName" label="姓名" />
            <el-table-column prop="phone" label="电话" />
            <el-table-column prop="ibSex" label="性别" />
            <el-table-column prop="ibComment" label="身份" />
            <el-table-column prop="ibYear" label="出生年份" />
            <el-table-column label="操作" width="160">
              <template #default="scope">
                <el-button size="small" @click="openEditResidentDialog(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDeleteResident(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          style="margin-top: 16px"
          background
          layout="prev, pager, next, jumper, ->, total"
          :total="residentTotal"
          :page-size="residentPageSize"
          :current-page="residentCurrentPage"
          @current-change="handleResidentPageChange"
        />
        <!-- 新增/编辑住户弹窗 -->
        <el-dialog :title="residentDialogTitle" v-model="editResidentDialogVisible" class="resident-dialog-inner">
          <el-form :model="residentForm" label-width="100px">
            <el-form-item label="姓名">
              <el-input v-model="residentForm.ibName" />
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="residentForm.phone" />
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="residentForm.ibSex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="身份">
              <el-select v-model="residentForm.ibComment" placeholder="请选择身份">
                <el-option label="业主" value="业主"></el-option>
                <el-option label="租户" value="租户"></el-option>
                <el-option label="家属" value="家属"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出生年份">
              <el-input v-model="residentForm.ibYear" />
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button @click="editResidentDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmitResident">确定</el-button>
          </template>
        </el-dialog>
        <template #footer>
          <el-button @click="residentDialogVisible = false">关闭</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { postRequest, putRequest, deleteRequest, getRequest } from '@/utils/request';

// 小区相关
const areaList = ref([]);
const selectedAreaId = ref('');

// 房屋表格相关
const houseTableData = ref([]);
const houseTotal = ref(0);
const housePageSize = ref(10);
const houseCurrentPage = ref(1);

// 住户弹窗相关
const residentDialogVisible = ref(false);
const selectedHouse = ref(null);
const residentTableData = ref([]);
const residentTotal = ref(0);
const residentPageSize = ref(10);
const residentCurrentPage = ref(1);

// 新增/编辑住户弹窗
const editResidentDialogVisible = ref(false);
const residentDialogTitle = ref('新增住户');
const residentForm = reactive({
  id: null,
  ibName: '',
  phone: '',
  ibSex: '',
  ibComment: '',
  ibYear: '',
  hid: ''
});

function fetchAreaList() {
  getRequest('/area/getAreaLists').then(res => {
    if (res && res.data && Array.isArray(res.data.data)) {
      areaList.value = res.data.data;
      if (!selectedAreaId.value && areaList.value.length > 0) {
        selectedAreaId.value = areaList.value[0].id;
        fetchHouseData(); // 只有拿到默认小区后再查房屋
      }
    }
  });
}
function fetchHouseData() {
  postRequest('/house/getHouseByAreaIdAndPage', {
    aid: selectedAreaId.value,
    current: houseCurrentPage.value,
    size: housePageSize.value
  }).then(res => {
    if (res && res.data && res.data.data) {
      houseTableData.value = Array.isArray(res.data.data) ? res.data.data : [];
      houseTotal.value = res.data.data.total || 0;
    } else {
      houseTableData.value = [];
      houseTotal.value = 0;
    }
  });
}
function handleAreaChange() {
  houseCurrentPage.value = 1;
  fetchHouseData();
}
function handleHousePageChange(page) {
  houseCurrentPage.value = page;
  fetchHouseData();
}
function openResidentDialog(house) {
  selectedHouse.value = house;
  residentCurrentPage.value = 1;
  fetchResidentData();
  residentDialogVisible.value = true;
}
function fetchResidentData() {
  if (!selectedHouse.value) return;
  postRequest('/inhabitants/getInhabitantsByHouseId', {
    id: selectedHouse.value.id,
    current: residentCurrentPage.value,
    size: residentPageSize.value
  }).then(res => {
    if (res && res.data && res.data.data) {
      residentTableData.value = Array.isArray(res.data.data) ? res.data.data : [];
      residentTotal.value = res.data.data.total || 0;
    } else {
      residentTableData.value = [];
      residentTotal.value = 0;
    }
  });
}
function handleResidentPageChange(page) {
  residentCurrentPage.value = page;
  fetchResidentData();
}
function openAddResidentDialog() {
  residentDialogTitle.value = '新增住户';
  Object.assign(residentForm, {
    id: null,
    ibName: '',
    phone: '',
    ibSex: '',
    ibComment: '',
    ibYear: '',
    hid: selectedHouse.value.id
  });
  editResidentDialogVisible.value = true;
}
function openEditResidentDialog(row) {
  residentDialogTitle.value = '编辑住户';
  Object.assign(residentForm, row);
  residentForm.hid = selectedHouse.value.id;
  editResidentDialogVisible.value = true;
}
function handleSubmitResident() {
  if (!residentForm.ibName || !residentForm.phone) {
    ElMessage.error('请填写完整信息');
    return;
  }
  if (residentForm.id) {
    putRequest('/inhabitants/updateInhabitantById', residentForm).then(() => {
      ElMessage.success('更新成功');
      editResidentDialogVisible.value = false;
      fetchResidentData();
    });
  } else {
    postRequest('/inhabitants/addInhabitant', residentForm).then(() => {
      ElMessage.success('添加成功');
      editResidentDialogVisible.value = false;
      fetchResidentData();
    });
  }
}
function handleDeleteResident(id) {
  ElMessageBox.confirm('确定要删除该住户吗？', '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteRequest(`/inhabitants/deleteInhabitantById/${id}`).then(() => {
      ElMessage.success('删除成功');
      fetchResidentData();
    });
  }).catch(() => {});
}
onMounted(() => {
  fetchAreaList();
});
</script>
<style scoped>
.resident-tech-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #23243a 0%, #3a3d5c 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.particle-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(135deg,rgba(56,189,248,0.08) 0 2px,transparent 2px 40px),
    repeating-linear-gradient(45deg,rgba(118,75,162,0.08) 0 2px,transparent 2px 40px);
  opacity: 0.7;
  animation: bgmove 30s linear infinite;
}
@keyframes bgmove {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 200px 200px, -200px -200px; }
}
.resident-content-table {
  position: relative;
  z-index: 2;
  background: rgba(40,50,90,0.96);
  border-radius: 24px;
  box-shadow: 0 8px 40px #38bdf855, 0 1.5px 8px #764ba255;
  padding: 36px 36px 32px 36px;
  min-width: 900px;
  max-width: 98vw;
  margin-top: 48px;
  border: 1.5px solid #38bdf8cc;
  backdrop-filter: blur(8px);
}
.resident-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.resident-title {
  display: flex;
  align-items: center;
  font-size: 26px;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px #38bdf855;
}
.resident-icon {
  font-size: 32px;
  margin-right: 14px;
  filter: drop-shadow(0 2px 8px #38bdf8cc);
}
.area-select {
  min-width: 180px;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #fff;
  border: 1.5px solid #38bdf8cc;
}
.resident-table {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  box-shadow: 0 2px 12px #38bdf822;
}
.resident-dialog {
  border-radius: 18px;
  background: rgba(40,50,90,0.98);
}
.resident-dialog-inner {
  border-radius: 14px;
  background: rgba(40,50,90,0.98);
}
.add-btn {
  margin-bottom: 18px;
  background: linear-gradient(90deg,#38bdf8,#764ba2);
  border: none;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 2px 12px #38bdf855;
}
.add-btn:hover {
  background: linear-gradient(90deg,#764ba2,#38bdf8);
  color: #fff;
}
.el-form-item {
  margin-bottom: 18px;
}
.el-select, .el-input {
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #fff;
  border: 1.5px solid #38bdf8cc;
}
.el-input__inner, .el-select__inner {
  background: transparent;
  color: #fff;
}
.el-button--primary {
  background: linear-gradient(90deg,#38bdf8,#764ba2);
  border: none;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 2px 12px #38bdf855;
}
.el-button--primary:hover {
  background: linear-gradient(90deg,#764ba2,#38bdf8);
  color: #fff;
}
</style> 